<template>
  <div class="wrap">
    <div class="line">
      <dl>
        <dt>图标：</dt>
        <dd>
          <pt-icon name="user" :size="18" color="#666"></pt-icon>
          <pt-icon name="vip" :size="18" color="#666"></pt-icon>
          <pt-icon name="zoom" :size="18" color="#666"></pt-icon>
          <pt-icon name="unzoom" :size="18" color="#666"></pt-icon>
          <pt-icon name="password" :size="18" color="#666"></pt-icon>
          <pt-icon name="close" :size="18" color="#666"></pt-icon>
          <pt-icon name="lock" :size="18" color="#666"></pt-icon>
          <pt-icon name="success" :size="18" color="#666"></pt-icon>
          <pt-icon name="error" :size="18" color="#666"></pt-icon>
          <pt-icon name="info" :size="18" color="#666"></pt-icon>
          <pt-icon name="warning" :size="18" color="#666"></pt-icon>
          <pt-icon name="top-arrow" :size="18" color="#666"></pt-icon>
          <pt-icon name="right-arrow" :size="18" color="#666"></pt-icon>
          <pt-icon name="bottom-arrow" :size="18" color="#666"></pt-icon>
          <pt-icon name="left-arrow" :size="18" color="#666"></pt-icon>
          <pt-icon name="menu" :size="18" color="#666"></pt-icon>
          <pt-icon name="search" :size="18" color="#666"></pt-icon>
          <pt-icon name="menu-arrow" :size="18" color="#666"></pt-icon>
          <pt-icon name="menu-system-set" :size="18" color="#666"></pt-icon>
        </dd>
      </dl>
    </div>
    <div class="line">
      <dl>
        <dt>单选：</dt>
        <dd>
          <pt-radio v-model="radio" label="1">单选1</pt-radio>
          <pt-radio v-model="radio" label="2">单选2</pt-radio>
          <pt-radio v-model="radio" label="3">单选3</pt-radio>
        </dd>
      </dl>
    </div>
    <div class="line">
      <dl>
        <dt>多选：</dt>
        <dd>
          <pt-checkbox v-model="checked">选择</pt-checkbox>

          <div style="height: 15px;"></div>
          <!-- 多选组 -->
          <pt-checkbox-group v-model="groupChecked">
            <pt-checkbox label="0">选择1</pt-checkbox>
            <pt-checkbox label="1">选择2</pt-checkbox>
            <pt-checkbox label="2">选择3</pt-checkbox>
          </pt-checkbox-group>
        </dd>
      </dl>
    </div>
    <div class="line">
      <dl>
        <dt>下拉框：</dt>
        <dd>
          <span style="position: relative;">
            <pt-button @click="dropdown = true">下拉</pt-button>
            <pt-dropdown :visible.sync="dropdown" top="30px" left="0">
              <div class="dropdown-ctn">内容</div>
            </pt-dropdown>
          </span>
        </dd>
      </dl>
    </div>
    <div class="line">
      <dl>
        <dt>tabs：</dt>
        <dd>
          <pt-tabs></pt-tabs>
        </dd>
      </dl>
    </div>
  </div>
</template>
<script>
export default {
  name: "uiDemo",
  data () {
    return {
      checked: false,
      groupChecked: [],
      dropdown: false,
      dialog1: false,
      dialog2: false,
      radio: "1"
    };
  }
};
</script>
<style lang="less" scoped>
.wrap {
  padding: 15px;
}
.line {
  padding-bottom: 20px;
  margin-bottom: 30px;
  .pt-icon {
    margin-right: 8px;
  }
  .pt-button {
    margin-right: 8px;
  }
  .pt-radio {
    margin-right: 8px;
  }
  .pt-checkbox {
    margin-right: 8px;
  }
}
.line:not(:last-child) {
  border-bottom: 1px dashed #eee;
}
.dropdown-ctn {
  width: 200px;
  height: 200px;
  padding: 15px;
  text-align: center;
}
.line dt {
  font-size: 18px;
  margin-bottom: 15px;
}
.line dd {
  padding-left: 15px;
}
</style>